<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>订单列表</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
    <link href="../../css/bootstrap-datetimepicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/all-like-orderlist.css">
    <link rel="stylesheet" href="../../css/jquery.pagination.css">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.js"></script>
    <!--引入时间插件-->
    <script src="../../js/moment-with-locals.min.js"></script>
    <script src="../../js/bootstrap-datetimepicker.js"></script>
    <script>
        $(document).ready(function() {
            $("#datetimepicker").datetimepicker({
                format: "yyyy-mm",
                weekStart: 1,
                autoclose: true,
                startView: 3,
                minView: 3,
                forceParse: false,
                endDate: new Date(), // 窗口可选时间从今天开始
                pickerPosition: "bottom-left"
            });
            $("#datetimepicker2").datetimepicker({
                format : "yyyy-mm",
                weekStart : 1,
                autoclose : true,
                startView : 3,
                minView : 3,
                forceParse : false,
                endDate : new Date(), // 窗口可选时间从今天开始
                pickerPosition : "bottom-left"

            });
            $("#bind").click(function () {
                var shop = $("#shop option:selected").val();
                var id = $("#shopId").val();
                $.ajax({
                    url:"/system/bind/"+id,
                    contentType:"application/json; charset=utf-8",
                    type:"post",
                    data:shop,
                    success:function(data){
                        window.location.href="/system/order";
                    }
                });
            })
        })
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="solid-hr row"></div>
    <form class="select-option row">
        <!--始末日期-->
        <div class="form-group fl form-style" style="margin-bottom: 10px">
            <div class='input-group date' id='datetimepicker' style="width: 20%;float:left">
                <input type='text' class="form-control" id="startDate" value="" placeholder="请选择开始月份"/> <span class="input-group-addon"> <span
                    class="glyphicon glyphicon-calendar"></span> </span>
            </div>

            <div class='input-group date' id='datetimepicker2' style="width: 30%;padding-left: 10%; float: left">
                <input type='text' class="form-control" id="stopDate" placeholder="请选择结束月份"/> <span class="input-group-addon"> <span
                    class="glyphicon glyphicon-calendar"></span> </span>
            </div>
            <div style="float: right;">
                <label for="orderId" > 订单号： </label>
                <input class="order-num" id="orderId" type="text" style="width: 50%" value="" placeholder="请输入订单号">
                <input type="button" class="btn btn-success sub" onclick="selectOrder()" value="查询">
            </div>
        </div>

    </form>
    <div class="operation row">
        <button class="btn delete delbtn" onclick="idDelete()"><img src="../images/delete01.png" alt="" >批量删除</button>
        <button class="btn btn-success distribute" onclick="give()"  data-toggle="modal" data-target="#giveModal"><img src="../images/distribute.png" alt="">分配门店</button>
    </div>
    <!--表格-->
    <div class="table-list row">
        <table class="table table-bordered">
            <thead>
            <tr class="active">
                <td><input  onclick="AAA('ck')" type="checkbox"></td>
                <td>订单编号</td>
                <td>顾客名称</td>
                <td>业务员姓名</td>
                <td>支付金额</td>
                <td>订单状态</td>
                <td>下单时间</td>
                <td>中心</td>
                <td>门店</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tb">
            <span th:each="p : ${pagination.list}">
            <tr>
                <td><input name="ck" type="checkbox" th:value="${p.form.id}"></td>
                <td th:text="${p.form.orderId}">hys20180716</td>
                <td th:text="${p.form.customerName}">张三</td>
                <td th:text="${p.form.salesmanName}">245</td>
                <td th:text="${p.form.money}">280</td>
                <td th:text="${p.status}">结束状态</td>
                <td th:text="${p.form.formDate}">2018-07-16</td>
                <td th:text="${p.form.center}">2018-07-16</td>
                <td th:text="${p.form.shop}">2018-07-16</td>
                <td><img src="../../images/edit.png" data-toggle="modal" data-target="#exampleModal" onclick="lick(this, this.id)" data-whatever="修改订单"/></td>
            </tr>
            </span>
            </tbody>
        </table>
    </div>
    <!--分页-->
    <div class="page-right">
        <div id="pagination3" class="page fl"></div>
    </div>
    <span th:text="${pagination.totalPage}"style="display: none"id="totalPage"></span>
    <!--修改弹框-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label"><i>*</i>订单编号</label><br/>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label"><i>*</i>订单状态</label><br/>
                            <select  name=""  class="form-control" id="message-text">
                                <option  selected disabled>订单状态</option>
                                <option th:each="s : ${statusList}" th:value="${s.id}" th:text="${s.state}"></option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-333" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateState()">修改</button>
                </div>
            </div>
        </div>
    </div>
    <!--弹框-->
    <div class="modal fade" id="giveModal" tabindex="-1" role="dialog" aria-labelledby="giveModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="giveModalLabel">分配门店</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="hidden" id="shopId"/>
                        <div class="form-group">
                            <label for="message-text" class="control-label"><i>*</i>门店</label><br/>
                            <select  class="form-control" id="shop">

                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-333" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="bind">修改</button>
                </div>
            </div>
        </div>
    </div>
    <!--删除确定弹框-->
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="delModalLabel"><img src="../images/delete02.png"/></h4>
                </div>
                <div class="modal-body del-title">
                    你确定要删除该内容？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="idDelete()" data-dismiss="modal">确定</button>
                    <button type="button" class="btn btn-default btn-333" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--引入模态框和复选框js-->
    <script src="../../js/checkbox.js"></script>
    <script src="../../js/jquery.pagination.min.js"></script>
    <script>
        var totalPage = $("#totalPage").text();

        $("#pagination3").pagination({
            totalPage: totalPage,
            isShow: true,
            count: totalPage,
            homePageText: "首页",
            endPageText: "尾页",
            prevPageText: "上一页",
            nextPageText: "下一页",
            callback: function(current){
            page(current)
        }
        });

        function give() {
            var ids = [];
            var i = 0;
            $.each($('#tb input:checked'), function () {
                if ($(this).val() != "on") {
                    ids[i] = $(this).val();
                    i++;
                }
            });

            if (ids.length == 1){
                id = parseInt(ids)
                $("#shopId").val(id)
                $.ajax({
                    url:"/system/getShopByIds/"+id,
                    contentType:"application/json; charset=utf-8",
                    type:"post",
                    success:function(data){
                        var html = "";
                        $.each(data,function (n,v) {
                            html+="<option>"+ v +"</option>"
                        })
                        $("#shop").html(html);
                    }
                });
            } else {
                alert("请选择一个！")
            }
        }

        function idDelete() {
            var ids = [];
            var i = 0;
            $.each($(' input:checkbox:checked'),function(){
                if($(this).val() != "on"){
                ids[i] = $(this).val();
                i++;}
            });
            var Pagination = {
                ids : ids
            }
            $.ajax({
                url:"/system/deleteOrder",
                contentType:"application/json; charset=utf-8",
                type:"post",
                data : JSON.stringify(Pagination),
                success:function(data){
                    if(data = "SUCCESS"){
                        alert("删除成功");
                        window.location.href="/system/order"
                    }else{
                        alert("删除失败");
                    }
                  }
            });
        }
        function updateState() {
            var orderId = $("#recipient-name").val();
            var stateId = $("#message-text").val();
            var Pagination = {
                orderId : orderId,
                stateId : stateId
            }
            $.ajax({
                url:"/system/updateOrder",
                contentType:"application/json; charset=utf-8",
                type:"post",
                data : JSON.stringify(Pagination),
                success:function(data){
                    if(data == "SUCCESS"){
                        alert("修改成功");
                        window.location.href="/system/order"
                    }else{
                        alert("修改失败");
                    }
                }
            });
        }
        function formatDate(now) {
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var date = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            if (month < 10) {
                month = "0" + month;
            }
            if (date < 10) {
                date = "0" + date;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (hour < 10) {
                hour = "0" + hour;
            }
            if (second < 10) {
                second = "0" + second;
            }
            return year + "-" +month +"-"+date +" "+hour + ":" + minute + ":" + second;
        }
        function selectOrder(){
            page(1);
        }
        function page(current) {

            var startDate = $("#startDate").val() ;
            var stopDate = $("#stopDate").val() ;
            var orderId  = $("#orderId").val();

            var Pagination  ={
                currentPage : current-1,
                size : 8,
                startDate : startDate,
                stopDate : stopDate,
                orderId : orderId
            }
            if(current <= totalPage){
                var html ='';
                $.ajax({
                    url:"/system/order",
                    contentType:"application/json; charset=utf-8",
                    type:"post",
                    data : JSON.stringify(Pagination),
                    success:function(data){
                        console.log(data.list);
                        $(".old").css("display","none");
                        $.each(data.list,function (n,val) {
                            html += " <tr>" +
                                "<td><input name='ck' type='checkbox' value='"+ val.id+"'></td>"+
                                "<td>"+val.form.orderId+"</td>"+
                                "<td>"+val.form.customerName+"</td>"+
                                "<td>"+val.form.salesmanName+"</td>"+
                                "<td>"+val.form.money+"</td>"+
                                "<td>"+val.status+"</td>"+
                                "<td>"+formatDate(new Date(val.form.formDate))+"</td>"+
                                 "<td><img src='../../images/edit.png' data-toggle='modal' data-target='#exampleModal' onclick='lick(this, this.id)' data-whatever='修改订单'/></td>"+
                                 "</tr>"
                        })
                        if(html == ""){
                            html = "<tr> <td style='background-color: #E6E6E6;height:200px; text-align: center;padding-top: 100px' colspan=10><h4 style='color: #A4A4A4;'>没有满足该条件的记录</h4></td></tr>"
                        }
                        $("#tb").html(html);

                    },

                });
            }
            
        }
        function lick(obj, id) {
            var td_content = $(obj).parents("tr").children("td");  //获取当前行中的所有td值
            var id = td_content.eq(1).text(); //获取当前行第二个td的值
            var name = td_content.eq(5).text(); //获取当前行第二个td的值

            document.getElementById('recipient-name').value = id;
            document.getElementById('message-text').value = name;
        }
    </script>
</div>
</body>
</html>